﻿// mandelzoom.js

var center = [-0.75, 0];
var size = [2.5, 2.5];
var transform;
var painter;

window.onload = function(evt) {
  var canvas = document.getElementById('drawCanvas');
  var lensCanvas = document.getElementById('lensCanvas');
  canvas.width = lensCanvas.width = window.innerWidth;
  canvas.height = lensCanvas.height = window.innerHeight;

  if(canvas.width > canvas.height)
    size[0] *= canvas.width / canvas.height;
  else
    size[1] *= canvas.height / canvas.width;

  transform = function(point)
  {
    return [
      center[0] + (point[0] / canvas.width - 0.5) * size[0],
      center[1] - (point[1] / canvas.height - 0.5) * size[1]
    ];
  }
  painter = new MandelbrotPainter(canvas);
  painter.paint(transform);

  window.addEventListener('mousemove', mouseMove);
  window.addEventListener('click', click);
}


function mouseMove(evt)
{
  var canvas = document.getElementById('lensCanvas');
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.save();
  context.fillStyle = 'yellow';
  context.fillRect(
    evt.clientX - canvas.width / 8,
    evt.clientY - canvas.height / 8,
    canvas.width / 4, canvas.height / 4);
  context.restore();
}

function click(evt)
{
  painter.stop();
  center = transform([ evt.clientX, evt.clientY ]);
  size[0] /= 4;
  size[1] /= 4;
  painter.paint(transform);
}
